<template>
  <div class="fixed bottom-[20px] w-full">
    <img
      src="/static/footer.png"
      class="absolute w-[100vw] h-[50px] left-0 top-0"
    />
    <div
      class="mx-auto h-[50px] flex items-center gap-[10px] w-fit relative z-2 text-[14px]"
    >
      <div
        v-for="(item, index) in tabs"
        class="py-[5px] relative w-[90px] text-center cursor-pointer"
        @click="changeTab(item)"
      >
        <img
          src="/static/bottomCard.png"
          class="w-full h-full absolute left-0 top-0 z-0"
        />
        <img
          v-if="activeKey == item.key"
          src="/static/maskBottom.png"
          class="w-full h-full absolute left-0 top-0 z-1"
        />
        <span class="text-[#fff] relative z-2">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { commonStore } from "@/stores";
const comStore = commonStore();
const { nowActive } = storeToRefs(comStore);
const tabs = ref([
  {
    label: "首页",
    key: "home",
  },
  {
    label: "经济分析",
    key: "jingjifenxi",
  },
  {
    label: "能耗监测",
    key: "nenghaojiance",
  },
  {
    label: "应急管理",
    key: "yingjiguanli",
  },
  {
    label: "环保监测",
    key: "huanbaojianche",
  },
  {
    label: "交通物流",
    key: "jiaotongwuliu",
  },
  {
    label: "人力资源",
    key: "renliziyuan",
  },
  {
    label: "综合服务",
    key: "zonghefuwu",
  },
]);
const activeKey = ref("home");
const changeTab = (item) => {
  activeKey.value = item.key;
  nowActive.value = item.key;
};
</script>
<style scoped lang="less"></style>
